<template>
  <div class="container">
    <div class="title">
      <!-- <h2>保证金设置</h2> -->
      <topTitle titleText="保证金设置"></topTitle>
      <operateListTab
        @getSelected="getCurrentTabComponent"
        :groupList="groupList"
        :tabIndex="tabIndex"
      ></operateListTab>
    </div>
    <div class="mainCon">
      <div class="commomPaddingComtainer">
        <keep-alive>
          <component
            v-bind:is="currentTabComponent"
            @func="getmsg($event)"
            :fromTag="fromTag"
          ></component>
        </keep-alive>
      </div>
    </div>
  </div>
</template>
<script>
import operateListTab from '@/components/publicCom/operateListTab'
import setCashDepositBank from '@/components/cashDeposit/setCashDepositBank'
import paymentRatio from '@/components/cashDeposit/paymentRatio'
export default {
  name: 'setCashDeposit',
  components: {
    operateListTab,
    setCashDepositBank,
    paymentRatio,
  },
  data() {
    return {
      currentTabComponent: 'setCashDepositBank',
      titleText: '保证金设置',
      groupList: [
        { name: '缴纳银行', componentName: 'setCashDepositBank' },
        { name: '缴纳比例', componentName: 'paymentRatio' },
      ],
      tabIndex: '0',
      fromTag: '', //是从工资保证金页面过来标识
    }
  },
  methods: {
    // 获取子组件上传成功后的值
    getCurrentTabComponent(data) {
      this.currentTabComponent = data.componentName
    },
    getmsg(data) {
      if (data === 'secondTab') {
        this.tabIndex = '1'
        this.currentTabComponent = 'paymentRatio'
        this.fromTag = 'setCashDeposit'
        $('#driver-page-overlay').remove()
      }
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .mainCon {
    padding: 0;
    height: calc(100% - 67px);
  }
}
.title {
  // background: #e4ebf1;
  // padding: 20px 24px;
  // height: 67px;
  // // color: #333;
  // position: relative;
  // h2 {
  //   font-size: 18px;
  //   color: #333333;
  //   font-weight: bold;
  // }
  /deep/ .operateList {
    position: absolute;
    right: 24px;
    top: 7px;
  }
}
</style>
